<template>
  <el-dialog
      :model-value="dialogVisible"
      :title="props.dialogProEviTitle"
      width="40%"
      @close="handleClose"
  >
    <el-form :model="form" ref="formRef" label-width="130px" :rules="rules">
      <el-form-item label="产品名称" prop="cpmc">
        <el-select v-model="form.cpmc" clearable placeholder="请选择">
          <el-option
              v-for="(item, index) in CpName"
              :key="index"
              :label="item"
              :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="产品认证类型" prop="certificateType">
        <el-select v-model="form.certificateType" clearable placeholder="请选择">
          <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="三品一标证书上传" prop="certificateMaterial">
        <my-upload
            :file-type="'certificateevi'"
            @get-form-pic-value="getFormPicValue"
        >
        </my-upload>
      </el-form-item>
      <el-form-item label="颁证日期" prop="createTime">
        <el-date-picker
            v-model="form.createTime"
            type="date"
            placeholder="选择日期"
            :size="'default'"
            clearable
        />
      </el-form-item>
      <el-form-item label="证书失效日期" prop="expireTime">
        <el-date-picker
            v-model="form.expireTime"
            type="date"
            placeholder="选择日期"
            :size="'default'"
            clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {defineEmits, ref, defineProps, onMounted} from 'vue'
import {getOptionsInfo} from "@/api/methods/initInfo.js";
import {getAllCpmc} from "@/api/apiPath/twoPart.js";
import MyUpload from "@/components/commons/myUpload.vue";

const getFormPicValue = (value)=> {
  console.log(value)
  form.value.certificateMaterial = value.pic
}
const props = defineProps({
  dialogProEviTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogProEviTableValue: {
    type: Object,
    default: {}
  },
  queryForm: {
  },
  dialogVisible: {
    type: Boolean,
    default: false
  }
})
const CpName = ref([])
const options = [
  {
    value: '有机证书',
    label: '有机证书',
  },
  {
    value: '绿色证书',
    label: '绿色证书',
  },
  {
    value: '地理标识证书',
    label: '地理标识证书',
  },
  {
    value: '无公害证书',
    label: '无公害证书',
  },
]
const formRef = ref(null)
const form = ref({
  cpmc: '',
  certificateMaterial: '',
  certificateType: '',
  expireTime: '',
  createTime: '',
  id: '',
  proIndex: ''
})
onMounted(async ()=> {
  await getOptionsInfo(getAllCpmc(), CpName)
  form.value = props.dialogProEviTableValue
})

const rules = ref({
  certificateType: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  cpmc: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  certificateMaterial: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  expireTime: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  createTime: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
})
const emits = defineEmits(['update:modelValue', 'handleConfirm'])
const handleClose = ()=> {
  emits('update:modelValue', false)
}
const handleConfirm = () => {
  emits("handleConfirm", {...form.value}, {...formRef.value})
}
</script>

<style scoped>


</style>